<template>
    <div class="container">
        <div class='u-title f-mtp10'>
            <h2>{{c_title}}</h2>
        </div>

        <div class='u-content mn flex flex-column flex-center'>
            <div class='item'>
                <label for="">标题</label>
                <div class='item-right'>
                    <el-input class='f-w300' v-model="title" placeholder="标题"></el-input>
                </div>
            </div>
            <div class='item'>
                <label for="">用户手机</label>
                <div class='item-right'>
                    <el-input class='f-w300' v-model="mobileNo" placeholder="用户手机"></el-input>
                </div>
            </div>
            <div class='item'>
                <label for="">用户地区</label>
                <div class='item-right'>
                    <Region ref="region" class='f-w300' @getRegion='getRegion' placeholder="选择地区" />
                </div>
            </div>
            <div class='item'>
                <label for="">咨询方式</label>
                <div class='item-right'>
                    <el-select clearable v-model="consultType" placeholder="请选择">
                      <el-option
                        v-for="item in consultTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </div>
            </div>
            <div class='item'>
                <label for="">问题分类</label>
                <div class='item-right'>
                    <CaseTypeSelect ref='caseType' class='f-w300' @getCaseType='getCaseType' placeholder='问题分类' />
                </div>
            </div>
            <div class='item'>
                <label for="">咨询记录</label>
                <div class='item-right'>
                    <quill-editor v-model="content"
                        placeholder='fsfsf'
                        ref="myQuillEditor"
                        :options="editorOption"
                        @change="onEditorChange"
                        >
                    </quill-editor>
                    <input v-show='false' type="file" @change="upfile" id='upImg' ref="upImg" accept="image/png, image/jpeg, image/gif, image/jpg" />
                </div>
            </div>
            <div class='btn-box f-ptp20'>
                <el-button
                    class='f-w300 s-bg-green s-cfff'
                    @click="submit">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import CaseTypeSelect from '../../components/CaseTypeSelect';
import Region from '../../components/Region'
import config from '../../config'
export default {
  name: 'AddConsultRecord',
  components: {
    'CaseTypeSelect': CaseTypeSelect,
    'Region': Region
  },
  data() {
    return {
      c_title: '新增咨询记录', 
      id: null,
      title: '',         // 咨询记录标题
      caseType: '',
      type: '',
      mobileNo: '',
      province: '',
      city: '',
      consultType: '', // 咨询方式
      consultTypeList: [
        {
          label: '即时通讯',
          value: 'im'
        },
        {
          label: '电话',
          value: 'phone'
        },
        {
          label: '网站来信',
          value: 'email'
        }
      ],
      content: '',
      editorOption: { 
        theme: 'snow',
        placeholder: '请在此输入咨询记录...',
        modules: {
          toolbar: {
            container: config.toolbarOptions,
            handlers: {
              'image': function(value) {
                if(value) {
                  document.querySelector('#upImg').click()
                } else {
                  this.quill.format('image', false);
                }
                
              }
            }
          }
        }
      }, // 富文本配置
      departmentId: '',  
      departmentList: [],  // 部门列表  
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {
    console.log('this is current quill instance object', this.editor)
  },
  created: function() {
    if(this.$route.params.id) {
      this.id = this.$route.params.id;
      this.c_title = '编辑咨询记录'
      this.getConsultDetailById(this.id);
    }
  },
  methods: {
    // 上传
    upfile(e) {
      const files = e.target.files;
      const form = new FormData();
      form.append("file", files[0]);
      form.append("dir", "notice");
      form.append("type", "1");
      this.$store.dispatch("UPLOAD_FILE", form).then(res => {
        if (res.data.retCode == 0) {
          this.$message.success("上传成功！");
          // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill;
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res.data.data)
            // 调整光标到最后
            quill.setSelection(length + 1)
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      });
    },
    getConsultDetailById(consultId) {
      this.$store.dispatch('GET_CONSULT_DETAIL', {
        id: consultId
      }).then(res => {
        if(res.data.retCode == 0) {
          console.log('res::', res)
          const consult = res.data.data;
          this.title = consult.title;
          this.mobileNo = consult.mobileNo;
          this.consultType = consult.type;
          this.content = consult.content;
          this.caseType = consult.caseType;
          this.$refs.caseType.setValue(consult.caseType);
          this.$refs.region.setValueById(consult.province, consult.city);
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 提交按钮点击事件
    submit() {
      console.log('consultType::', this.consultType);
      if(this._utils.isEmpty(this.title)) {
        this.$message.warning('请输入标题！');
        return;
      }
      if(!this._utils.isPhoneNum(this.mobileNo)) {
        this.$message.warning('请输入正确的手机号码！');
        return;
      }
      if(this._utils.isEmpty(this.province)) {
        this.$message.warning('请选择地区！');
        return;
      }
      if(this._utils.isEmpty(this.consultType)) {
        this.$message.warning('请选择咨询方式！');
        return;
      }
      if(this._utils.isEmpty(this.caseType)) {
        this.$message.warning('请选择问题分类！');
        return;
      }
      if(this._utils.isEmpty(this.content)) {
        this.$message.warning('请输入咨询记录！');
        return;
      }
      this.handleConsult();
    },
    // 获取地区
    getRegion(region) {
      if(region.hasOwnProperty('province')) {
        this.province = region.province.id;
      } else {
        this.province = '';
      }
      if(region.hasOwnProperty('city')) {
        this.city = region.city.id;
      } else {
        this.city = '';
      }
    },
    // 添加/编辑咨询记录
    handleConsult() {
      this.$store.dispatch('HANDLE_CONSULT', {
        id: this.id,
        caseType: this.caseType,
        type: this.consultType,
        mobileNo: this.mobileNo,
        province: this.province,
        city: this.city,
        title: this.title,
        state: 'normal',
        content: this.content
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('提交成功！');
          this.$router.push('/home/consult');
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 获取分类ID
    getCaseType(caseType) {
      this.caseType = caseType;
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!-quill', quill, html, text)
      console.log('editor change!-html', html)
      console.log('editor change!-text', text)
      this.content = html;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upload-tip{
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    line-height: 24px;
}

.container{
  /* width: 800px; */
  /* margin: 0 auto; */
}
.mn{
    padding: 30px 0 50px 0;
}
.item{
  width: 100%;
    display: flex;
    margin-bottom: 10px;
}
.item>label{
    display: inline-block;
    width: 90px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
}
.item>label::before{
    content: '*';
    line-height: 40px;
    color: red;
    margin-right: 5px;
}
.item-right{
    /* width: 600px */
    flex: 1;
}
.btn-box{
    padding-left: 90px;
}
</style>
